<meta charset='utf-8'/>
<body style='margin:0px;'>
<canvas id="canvas" width='400px' height='400px' style='background:black'></canvas><br/>
<input type='button' value='start' onclick='start()'>
<input type='button' value='stop' onclick='stop()'>
<input type='button' value='clear' onclick='clearRect()'><br/>
<div id='msg'></div>
<script type="text/javascript">
	var Vector2 = function(x, y){
		this.x = x;
		this.y = y;
	}
	Vector2.prototype = {
		length : function(){return Math.sqrt(this.x * this.x + this.y * this.y);},
		add : function(v){this.x += v.x; this.y += v.y;},
		subtract : function(v){this.x -= v.x; this.y -= v.y;},
		multiply : function(f){return new Vector2(this.x * f, this.y * f);},
		divide : function(f){return new Vector2(this.x / f, this.y / f);},
		dot : function(v){return this.x * v.x + this.y * v.y;},
		resistance : function(){}
	};
	Vector2.zero = new Vector2(0, 0);
	var ctx = canvas.getContext('2d');
	ctx.strokeStyle = '#000000';
	var p = new Vector2(0, 200);
	var v = new Vector2(0, -50);
	var acceleration = new Vector2(0, 0);
	var dt = 0.1;
	var id;
	var chamberBox = new ChamberBox(0, 0, 400, 400);
	ctx.globalCompositeOperation = "lighter";
	// ctx.globalCompositeOperation = "source-over";
	function draw(particle){
		particle.p.add(particle.v.multiply(dt));
		sum =Math.abs(pointerX - particle.p.x) + Math.abs(pointerY - particle.p.y);
		acceleration.x = (pointerX - particle.p.x) / sum * 50;
		acceleration.y = (pointerY - particle.p.y) / sum * 50;
		particle.v.add(acceleration.multiply(dt));
		particle.v = particle.v.multiply(0.99);
		// msg.innerHTML = position.y;
		chamberBox.apply(particle.p, particle.v);
		ctx.beginPath();
		ctx.fillStyle = particle.c;
		ctx.arc(particle.p.x, particle.p.y, particle.size, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fill();
	}
	var Particle = function(){
		this.p = new Vector2(Math.random() * 400, Math.random() * 400);
		this.v = new Vector2(Math.random() * 100, Math.random() * 100);
		this.c = "rgb(" + Math.floor(255 * Math.random()) + "," + Math.floor(255 * Math.random()) + "," + Math.floor(255 * Math.random()) + ")";
		this.size = Math.random() * 3.5;
	};
	function desalt(){
		ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	function ChamberBox(x1, y1, x2, y2){
		this.apply = function(p, v){
			// if(p.x < x1 || p.x > x2){
			// 	v.x = -v.x;
			// }
			// if(p.y < y1 || p.y > y2){
			// 	v.y = -v.y;
			// }
		}
	}
	function chanhgeAcceleration(acceleration, position){

	}
	var particles = [];
	for(var i=0; i<100; i++){
		particles.push(new Particle());
	}
	function drawAll(){
		// desalt();
		ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(8,8,12,0.65)";
        ctx.fillRect(0, 0, 400, 400);
        ctx.globalCompositeOperation = "lighter";
		for(var i=0; i<100; i++){
			draw(particles[i]);
		}
	}
	function start(){
		id = setInterval(drawAll, 33);
	}
	var sum = 0;
	var pointerX = 200;
	var pointerY = 200;
	canvas.onmousemove = function mousePointer(e){
		// alert(e.pageX - position.x)
		pointerX = e.pageX;
		pointerY = e.pageY;
		// sum =Math.abs(pointerX - position.x) + Math.abs(pointerY - position.y);
		// velocity.x = (pointerX - position.x) / sum * 50;
		// velocity.y = (pointerY - position.y) / sum * 50;
		// alert(acceleration.x)
	}
	function stop(){
		clearInterval(id);
	}
	function clearRect(){
		ctx.clearRect(0, 0, canvas.width, canvas.height);
	}
</script>
</body>